<%--<%@ page import = "java.util.Enumeration" %>--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>modaldemo</title>
    <script src="/js/jquery.min.js"></script>
    <style media="screen">
        .modal-overlay {
            visibility: hidden;
            position: absolute;   /* 使用绝对定位或固定定位  */
            left: 0px;
            top: 0px;
            width:100%;
            text-align:center;
            z-index: 1000;
            /*background-color: #333;*/
            /*opacity: 0.5;   !* 背景半透明 *!*/
            background:rgba(0,0,0,0.6)!important;
            background:#000;
            filter:Alpha(opacity=60);
        }
        /* 模态框样式 */
        .modal-data{
            width:53%;
            margin: 100px auto;
            background-color: #fff;
            border:1px solid #000;
            padding:15px;
            text-align:center;
            z-index: 999;
        }
        .data-form {
            margin: 0 50px;
            text-align: left;
        }
        .data-form  > label {
            display: inline-block;
            margin-left: 85px;
            margin-top: 10px;
        }
        .data-form input {
            margin-left: 5px;
        }
        .form-button {
            margin: 30px auto;
        }
        table {
            width: 100%;
        }
        table th, table td {
            width: 20%;
            text-align: center;
        }
        a {
            text-decoration: none;
            color: blue;
        }
        a:hover {
            cursor: pointer;
        }

    </style>
</head>
<body style="position: relative">
<!--<div style="width: 600px; height: 800px;">-->
<div class="modal-overlay add-form">
    <div class="modal-data">
        <p>新增</p> <p>sessionId : ${sessionId}</p>
        <form id="add-form" class="data-form">
            <label>姓名<input type="text" name="name" value="" placeholder="请输入姓名..."></label>
            <label>地址<input type="text" name="address" value="" placeholder="请输入地址..."></label>
            <label>电话<input type="text" name="phone" value="" placeholder="请输入电话..."></label>
            <input hidden type="reset" value="重置"/>
        </form>
        <div class="form-button">
            <input type="button" value="添加"  onclick="addDataBtn()"/>
            <input style="margin-left: 20px" type="button" value="取消"  onclick="addData()"/>
        </div>
    </div>
</div>
<div class="modal-overlay modify-form">
    <div class="modal-data">
        <p>修改</p>
        <form id="modify-form" class="data-form">
            <input hidden type="text" name="id" value="">
            <label>姓名<input type="text" name="name" value="" placeholder="请输入姓名..."></label>
            <label>地址<input type="text" name="address" value="" placeholder="请输入地址..."></label>
            <label>电话<input type="text" name="phone" value="" placeholder="请输入电话..."></label>
            <input hidden type="reset" value="重置"/>
        </form>
        <div class="form-button">
            <input type="button" value="添加"  onclick="updateDataBtn()"/>
            <input style="margin-left: 20px" type="button" value="取消"  onclick="cancleUpdate()"/>
        </div>
    </div>
</div>


<a href="#" onclick="addData()">新增</a>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    System.out.println("basePath："+basePath);
%>
<p>url: <%=basePath %></p>
<p>sessionId : ${sessionId}</p>
<%--<a href="#" onclick="updateData()">显示对话模态框</a>--%>
<fieldset>
    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>地址</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${listData}" var="user">
            <tr>
                <td>${user["id"]}</td>
                <td>${user["name"]}</td>
                <td>${user["address"]}</td>
                <td>${user["phone"]}</td>
                <td><a onclick="updateData('${user["id"]}')">编辑</a>&nbsp<a onclick="deleteData('${user["id"]}')">删除</a></td>
            </tr>
        </c:forEach>

    </table>
</fieldset>

<script type="text/javascript">
    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [ o[this.name] ];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }
    function addData () {
        $("#add-form input[type=reset]").trigger("click");
        var e1 = document.getElementsByClassName('add-form')[0];
        e1.style.height = window.innerHeight + "px";
        e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
    }
    function addDataBtn () {
        var e1 = document.getElementsByClassName('add-form')[0];
        e1.style.height = window.innerHeight + "px";
        $.ajax({
            url: "/addUser",
            type: "POST",
            data: $("#add-form").serializeObject(),
            dataType: "text",
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            success : function (data) {
                console.log("success", data)
                alert(data)
            },
            error:function (error) {
                console.log("error", error)
                alert(error)
            }
        });
        $("#add-form input[type=reset]").trigger("click");
        e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
        this.setTimeout("location.reload()", 1000);
    }
    function cancleUpdate() {
        var e1 = document.getElementsByClassName('modify-form')[0];
        e1.style.height = window.innerHeight + "px";
        e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";

    }
    function  updateData(dataId) {
        var e1 = document.getElementsByClassName('modify-form')[0];
        e1.style.height = window.innerHeight + "px";
        e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
        $.ajax({
            url: "/getData?id=" +dataId,
            type: "POST",
            // data: JSON.stringify({"id" : dataId}),
            "Content-Type": "text/json;charset=utf-8",
            dataType: "json",
            success : function (data) {
                console.log("success", data)
                var $modify = $("#modify-form");
                $modify.find("input[name='id']").val(data.id)
                $modify.find("input[name='name']").val(data.name)
                $modify.find("input[name='address']").val(data.address)
                $modify.find("input[name='phone']").val(data.phone)
            },
            error :function (error) {
                console.log("error", error)
                alert(error)
            }
        })
    }
    function  updateDataBtn() {
        var e1 = document.getElementsByClassName('modify-form')[0];
        e1.style.height = window.innerHeight + "px";
        e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
        $.ajax({
            url: "/updateData",
            type: "POST",
            data: $("#modify-form").serializeObject(),
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            dataType: "text",
            success : function (data) {
                console.log("success", data)
                alert(data)
            },
            error:function (error) {
                console.log("error", error)
                alert(error)
            }
        })
        this.setTimeout("location.reload()", 1000);
    }
    function deleteData(dataID) {
        var sure = this.confirm("您确定要删除该条数据吗? 数据删除后不可恢复!!");
        if(sure) {
            $.ajax({
                url: "/" + dataID + "/delete",
                type: "POST",
                dataType: "text",
                success : function (data) {
                    console.log("success", data)
                    alert(data)
                },
                error :function (error) {
                    console.log("error", error)
                    alert(error)
                }
            })
            this.setTimeout("location.reload()", 1000);
        } else {
            alert("取消删除操作!")
        }
    }
    function deleteDataBtn() {

    }
    var list = "${listData}"
    console.log(list)

</script>
</body>
</html>
